<template>
  <div class="dashboard-page" style="padding: 20px">
    <el-form :model="formData" class="form-container">
      <el-row :gutter="20" justify="space-between" style="width: 100%">
        <el-col :span="8">
          <el-form-item label="出院日期">
            <el-date-picker
              v-model="formData.dateRange"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 260px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 修改折线图容器的高度 -->
    <el-card style="margin-bottom: 20px">
      <div ref="lineChartRef" style="width: 100%; height: 400px" />
    </el-card>

    <!-- 异常规则表格 -->
    <el-card style="margin-bottom: 20px">
      <el-table :data="ruleData" border style="width: 100%">
        <el-table-column prop="id" label="规则编码" align="center" />
        <el-table-column prop="name" label="规则名称" align="center" />
        <el-table-column prop="count" label="异常数量" align="center">
          <template #default="scope">
            <el-link type="primary">{{ scope.row.count }}</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 质控效果分析表格 -->
    <el-card style="margin-bottom: 20px">
      <h3 style="margin-bottom: 10px">质控效果分析</h3>
      <el-table :data="effectData" border style="width: 100%">
        <el-table-column prop="item" label="对比分析项目" align="center">
          <template #default="scope">
            <el-link type="primary">{{ scope.row.item }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="before" label="质控前" align="center" />
        <el-table-column prop="after" label="质控后" align="center" />
        <el-table-column label="趋势分析" align="center">
          <template #default="scope">
            <span>{{ scope.row.trend }}</span>
            <el-icon :color="scope.row.iconColor" style="margin-left: 4px">
              <component :is="scope.row.trendIcon" />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 修改柱状图 Tabs 部分 -->
    <el-card>
      <el-tabs v-model="activeTab" class="chart-tabs" @tab-change="handleTabChange">
        <el-tab-pane label="科室排名" name="dept" />
        <el-tab-pane label="医师组排名" name="group" />
        <el-tab-pane label="医师排名" name="doctor" />
      </el-tabs>
      <div class="chart-container">
        <div ref="barChartRef" style="width: 100%; height: 400px" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import http from '@/util/http1'
import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'

let lineChart = null
let barChart = null

const activeTab = ref('dept')

const initialData = {
  // 折线图
  lineChart: {
    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    series: [4, 4, 6, 8, 10, 12, 14, 16, 14, 12, 8, 4],
  },
  // 柱状图
  barChart: {
    dept: {
      // 科室数据
      xAxis: [
        'XX1科室',
        'XX2科室',
        'XX3科室',
        'XX4科室',
        'XX5科室',
        'XX6科室',
        'XX7科室',
        'XX8科室',
        'XX9科室',
        'XX10科室',
      ],
      series: [95, 86, 78, 70, 65, 60, 55, 48, 42, 35],
    },
    group: {
      // 医师组数据
      xAxis: [
        'XX1组',
        'XX2组',
        'XX3组',
        'XX4组',
        'XX5组',
        'XX6组',
        'XX7组',
        'XX8组',
        'XX9组',
        'XX10组',
      ],
      series: [88, 82, 75, 68, 62, 58, 52, 45, 40, 32],
    },
    doctor: {
      // 医师数据
      xAxis: [
        'XX1医师',
        'XX2医师',
        'XX3医师',
        'XX4医师',
        'XX5医师',
        'XX6医师',
        'XX7医师',
        'XX8医师',
        'XX9医师',
        'XX10医师',
      ],
      series: [92, 85, 76, 69, 64, 59, 54, 47, 41, 33],
    },
  },
  // 规则列表数据
  ruleList: [
    { id: 'qz001', name: '住院与诊断检查', count: 608 },
    { id: 'qz002', name: '主要诊断逻辑错误', count: 568 },
  ],
  // 效果分析数据
  effectList: [
    {
      item: '临床诊疗原因项',
      before: '100',
      after: '0',
      trend: '100%',
      trendIcon: 'ArrowUpBold',
      iconColor: '#67C23A',
    },
    {
      item: '深入挖掘率',
      before: '10',
      after: '0',
      trend: '100%',
      trendIcon: 'ArrowUpBold',
      iconColor: '#67C23A',
    },
    {
      item: '总成数',
      before: '10000',
      after: '20000',
      trend: '100%',
      trendIcon: 'ArrowUpBold',
      iconColor: '#67C23A',
    },
    {
      item: '综合错病项数量',
      before: '100',
      after: '200',
      trend: '100%',
      trendIcon: 'ArrowUpBold',
      iconColor: '#67C23A',
    },
    {
      item: '核心组成的病种数',
      before: '200',
      after: '100',
      trend: '50%',
      trendIcon: 'ArrowDownBold',
      iconColor: '#F56C6C',
    },
  ],
}

const formData = ref({
  dateRange: [],
})

const lineData = ref({
  xAxis: initialData.lineChart.xAxis,
  series: initialData.lineChart.series,
})

const barData = ref({
  xAxis: initialData.barChart.dept.xAxis,
  series: initialData.barChart.dept.series,
})

const ruleData = ref(initialData.ruleList)
const effectData = ref(initialData.effectList)

const lineChartRef = ref(null)
const barChartRef = ref(null)

const handleSearch = async () => {
  const params = {
    startDate: formData.value.dateRange[0] || '',
    endDate: formData.value.dateRange[1] || '',
  }

  try {
    const res = await http.post('/api/quality/overview', params)

    if (res.data.lineChart) {
      lineData.value = res.data.lineChart
    }
    if (res.data.barChart) {
      barData.value = res.data.barChart
    }
    if (res.data.ruleList) {
      ruleData.value = res.data.ruleList
    }
    if (res.data.effectList) {
      effectData.value = res.data.effectList
    }

    updateLineChart()
    updateBarChart()
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}

const updateLineChart = () => {
  if (!lineChart) return

  lineChart.setOption({
    xAxis: {
      data: lineData.value.xAxis,
    },
    series: [
      {
        data: lineData.value.series,
        type: 'line',
        smooth: true,
      },
    ],
  })
}

const updateBarChart = () => {
  if (!barChart) return

  barChart.setOption({
    xAxis: {
      data: barData.value.xAxis,
    },
    series: [
      {
        data: barData.value.series,
        type: 'bar',
        itemStyle: { color: '#409EFF' },
      },
    ],
  })
}

const handleTabChange = (tabName) => {
  barData.value = {
    xAxis: initialData.barChart[tabName].xAxis,
    series: initialData.barChart[tabName].series,
  }
  updateBarChart()
}

onMounted(() => {
  lineChart = echarts.init(lineChartRef.value)
  lineChart.setOption({
    title: {
      text: '整体情况和趋势',
      textAlign: 'center',
      left: 'center',
    },
    tooltip: { trigger: 'axis' },
    grid: {
      top: 60,
      bottom: 30,
      left: 60,
      right: 30,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: lineData.value.xAxis,
    },
    yAxis: {
      type: 'value',
      name: '异常病例数',
      nameTextStyle: {
        padding: [0, 0, 0, 20],
        fontSize: 14,
      },
    },
    series: [
      {
        type: 'line',
        smooth: true,
        data: lineData.value.series,
      },
    ],
  })

  barChart = echarts.init(barChartRef.value)
  barChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      top: 60,
      bottom: 30,
      left: 60,
      right: 30,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: barData.value.xAxis,
    },
    yAxis: {
      type: 'value',
      name: '异常病例数',
      nameTextStyle: {
        padding: [0, 0, 0, 20],
        fontSize: 14,
      },
    },
    series: [
      {
        type: 'bar',
        data: barData.value.series,
        itemStyle: {
          color: '#409EFF',
          borderRadius: [4, 4, 0, 0],
        },
        barWidth: '40%',
      },
    ],
  })

  window.addEventListener('resize', () => {
    lineChart?.resize()
    barChart?.resize()
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', () => {
    lineChart?.resize()
    barChart?.resize()
  })
  lineChart?.dispose()
  barChart?.dispose()
})
</script>

<style scoped>
.form-container {
  width: 100%;
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 0;
}

.el-row {
  width: 100%;
  display: flex;
  align-items: center;
}

.el-col:last-child {
  display: flex;
  justify-content: flex-end;
}

.el-card {
  margin-bottom: 24px;
}

.chart-tabs {
  width: 100%;
}

.chart-container {
  width: 100%;
  min-height: 400px;
}

:deep(.el-tabs__content) {
  width: 100%;
  overflow: visible;
}

:deep(.el-tab-pane) {
  width: 100%;
}

:deep(.el-tabs__nav-wrap) {
  width: 100%;
}
</style>
